<template>
    <div class="branch_lesson">
        <x-header :left-options="{showBack: false}">主题党日</x-header>
        <v-scroll :on-infinite="infinite"  :on-refresh = "refresh" ref="my_scroller" :dataList="scrollData" id="themeId">
            <div class="lesson_lists">
                <template v-for="(item,index) of lessons">    
                    <div class="list" :key="index">
                        <div class="list_time">{{item.create_time}}</div>
                        <router-link tag="div" class="list_message" :to="{name: 'ThemeDetail', params: {themeid: item.id}}">
                            <div class="list_img">
                                <img :src="item.first_thumb||noramlSrc" alt="">
                            </div>
                            <div class="list_title">{{item.title}}</div>
                        </router-link>
                    </div>
                </template>
            </div>
        </v-scroll>
    </div>
</template>

<script>
import { XHeader } from "vux";
import VScroll from "../pull-refresh";
import { mapGetters } from "vuex";
export default {
  components: {
    XHeader,
    VScroll
  },
  computed: {
    ...mapGetters(["themesList", "themesTotal","themeScrollTop"])
  },
  created() {
    this.$store.dispatch("getThemesList");
  },
  mounted() {
    this.$nextTick(() => {
      this.box = this.$el.querySelector("#themeId");
      this.box.addEventListener("scroll", this.handler, false);
    });
  },
  watch: {
    themesList: function(val) {
      this.lessons = val;
    },
    // lessons: function(val) {
    //   if (this.themesTotal <= this.num || val.length >= this.themesTotal) {
    //     this.scrollData.noFlag = true;
    //   } else {
    //     this.scrollData.noFlag = false;
    //   }
    // }
    page: function(val) {
      let total = Math.ceil(this.themesTotal / this.num);
      if (val > total) {
        this.scrollData.noFlag = true;
      }
    },
  },
  activated() {
    this.lessons = this.themesList;
  },
  deactivated() {
    this.lessons = {};
  },
  data() {
    return {
      page: 1,
      num: 10,
      scrollData: {
        noFlag: false //暂无更多数据显示
      },
      lessons: [],
      noramlSrc: require("./shyk_bg.png")
    };
  },
  methods: {
    handler() {
      this.box = document.querySelector("#themeId");
      this.$store.dispatch("updateThemePosition", this.box.scrollTop);
    },
    refresh(done) {
      this.$store.dispatch("getThemesList");
      this.page = 1;
      done();
    },
    infinite(done) {
      this.page++;
      let end = this.num * this.page;
      let i = end - this.num;
      let more = this.$el.querySelector(".load-more");
      this.$store.dispatch("getThemesList", { page: this.page }).then(() => {
        for (i; i < end; i++) {
          if (i >= this.themesTotal) {
            more.style.display = "none"; //隐藏加载条
            // this.scrollData.noFlag = true;
            break;
          } else {
            more.style.display = "none"; //隐藏加载条
          }
        }
      });
      done();
    }
  }
};
</script>

<style lang="less">
.branch_lesson {
  width: 100%;
  height: 100%;
  font-size: 0;
  background: rgb(245, 245, 249);
  position: relative;
  .lesson_lists {
    padding: 0.75rem 0 0;
    .list {
      width: 100%;
      margin-bottom: 1.75rem;
      text-align: center;
      .list_time {
        display: inline-block;
        width: 7.875rem;
        height: 1.1875rem;
        border-radius: 0.3125rem;
        vertical-align: middle;
        text-align: center;
        background: rgb(206, 206, 206);
        color: rgb(255, 255, 255);
        font-size: 0.8125rem;
      }
      .list_message {
        display: inline-block;
        width: 22.1875rem;
        margin-top: 0.5625rem;
        .list_img {
          width: 100%;
          height: 9.4375rem;
          border-top-left-radius: 0.3125rem;
          border-top-right-radius: 0.3125rem;
          background: rgb(255, 255, 255);
          overflow: hidden;
          img {
            width: 100%;
            overflow: hidden;
          }
        }
        .list_title {
          padding: 1.0625rem 0.625rem 0.75rem;
          width: 100%;
          font-size: 0.9375rem;
          color: rgb(51, 51, 51);
          text-align: left;
          background: rgb(255, 255, 255);
        }
      }
    }
    .list:last-child{
      margin: 0;
    }
  }
}
</style>